<template>
  <h1>员工列表</h1>
  <input type="text" placeholder="请输入员工姓名:" v-model="emp.username">
  <input type="text" placeholder="请输入员工工资:" v-model="emp.usersalary">
  <input type="text" placeholder="请输入员工岗位:" v-model="emp.userjob">
  <button @click="add">添加员工</button>
  <hr>
  <table border="1px" align="center">
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>工资</th>
      <th>岗位</th>
    </tr>
    <tr v-for="(item, index) in userList" :key="item">
      <td>{{index+1}}</td>
      <td>{{item.username}}</td>
      <td>{{item.usersalary}}</td>
      <td>{{item.userjob}}</td>
    </tr>
  </table>
</template>

<script setup>
import {ref} from "vue";

const userList=ref([]);
const emp=ref({
  username:"",
  usersalary:"",
  userjob:""
})
const add=()=>{
  // 添加前需要判断是否为空
  if (emp.value.username.trim()=='' || emp.value.usersalary.trim()=='' || emp.value.userjob.trim()==''){
    alert("请输入完整信息");
    return;
  }
  userList.value.push(emp.value);
  //清除输入框内容
  emp.value={
    username:"",
    usersalary:"",
    userjob:""
  };
}
</script>

<style scoped>

</style>